<template>
  <transition name="modal">
  <div id="modal" class="modal">
    <div class="modal-warp">
      <div class="modal-container" :style="{width:width}">
        <div class="modal-header">
          <slot name="header">
            default header
          </slot>
          <span class="cancel r" @click="$emit('close')">X</span>
        </div>
        <div class="modal-body" >
          <slot name="body">
            default body
          </slot>
        </div>

        <div class="modal-footer">
          <slot name="footer">

          </slot>
        </div>
      </div>
    </div>
  </div>
  </transition>
</template>
<style rel="stylesheet/scss" type="text/css" lang="scss" scoped>
  @import "../../assets/css/variable";
  .modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    text-align: center;
    overflow: auto;
    background-color: rgba(0, 0, 0, .6);
    transition: all  .3s ease-out;
    .modal-warp{
      display: table;
      height: calc(100% - 80px);
      margin: 40px auto;
    }
    .modal-container {
      display: table-cell;
      vertical-align: middle;
      margin: 40px auto;
      border-radius: 2px;
      transition: all .25s ease-out;
      .modal-header{
        height: 40px;
        line-height: 40px;
        background-color: #ddd;
        padding: 0 20px;
        border-radius: 4px 4px 0 0;
        color: #333;
        text-align: left;
        .cancel{
          padding: 2px;
          cursor: pointer;
          &:hover{
            opacity: .5;
          }
        }
      }
      .modal-body {
        padding: 20px 0;
        background-color: #fff;
        text-align: left;
        width: 100%;
       /* overflow-y: auto;
        overflow-x: visible;*/
        /*border-radius: 0 0 4px 4px;*/
      }

      .modal-footer{
        background-color: #fff;
        border-radius: 0 0 4px 4px;
        text-align: right;
        line-height:60px;
        min-height: 4px;
      }

      .modal-default-button {
        float: right;
      }
    }
  }
  .modal-enter {
    opacity: 0;
  }

  .modal-leave-active {
    opacity: 0;
  }

  .modal-enter .modal-container,
  .modal-leave-active .modal-container
  {
    -webkit-transform: scale(.8);
    transform: scale(.8);
  }

</style>
<script>
    export default{
        mounted:function () {
          this.$nextTick(function () {
            this.init();
          });
        },
        data:function(){
          return {
          }
        },
        methods: {
          init:function(){
          },
          bindEvt:function(){

          }
        },
        computed:{
        },
        props: {
          width: {
            type: String,
            /*default:'70%'*/
          }
        }
    }
</script>
